body{
    background-color: rgb(226, 132, 109);
}
/*------- 初始状态 -----*/
.search-box{
    margin:0 auto;
    width: 50px;
    height: 50px;
    /* border: 1px solid black; */
    position: relative;
    transition: 0.3s;
    
}
.search-box input{
    height: 50px;
    width: 0;
    border: none;
    outline: none;
    border-radius: 25px;
    padding:0 25px;
    background-color: rgb(88, 87, 87);
    color: white;
    transition: 0.3s;
    font-size:1.2em;
}
.search-box button{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    outline: none;
    border: none;
    position: absolute;
    top:5px;
    left:5px;
    transition: 0.3s;
    cursor: pointer;
    background-color: rgb(88, 87, 87);
    color: orange
    
}
/* hover时触发 */
.search-box:hover input{
    width: 150px;
    padding:0 50px 0 10px;
}
.search-box:hover button{
    transform: translateX(160px);
    background-color:white;
}
.search-box:hover{
    transform: translateX(-70px)
}
.search-box button:active{
    background-color: rgb(202, 202, 202);
}